Day 10 Event Handling

2024 iThome 鐵人賽

DAY 10

JavaScript

每天都進步一點！從零開始的JavaScript 與基礎網路知識學習系列第 10 篇

16th鐵人賽

karin0720

2024-09-10 16:26:44

88 瀏覽

分享至

大家好，我是Karin。今天要來學習的主題是Event Handling事件處理。
學習內容來自：彭彭的課程
https://youtube.com/playlist?list=PL-g0fdC5RMbqW54tWQPIVbhyl_Ky6a2VI&si=GUZKKA1B-l6bBBSz

事件處理三大關鍵：

在哪個標籤上發生
事件的種類(使用者的動作)
對應的函式處理動作

設定事件處理函式

在某特定標籤上，將函式與事件作對應。

範例一：用this關鍵字，來代表觸發此事件的標籤

<div onclick="change(this);">原本的內文</div>
<script>
    function change(elem){
        elem.innerHTML="新內文";
    }
</script>

執行結果：使用者點擊後，改變標籤本身的內文。

此處的this指的就是dic這個標籤。
使用this的話，就不需要再用id屬性建立連結了。

範例二：多個事件搭配使用

<button
    onmousedown="down(this);"
    onmouseup="up(this);">按鈕</button>
<script>
    function down(elem){
        elem.style.color="red";
    }
    function up(elem){
        elem.style.color="black";
    }
</script>

執行結果：滑鼠按住後變紅色；滑鼠放開後變黑色

此處的this指的是button這個標籤。

簡單介紹幾個常用的事件種類：

onmousedown 滑鼠按住(不放)
onmouseup 滑鼠放開
onclick 點擊
onmouseover 滑鼠移入(滑鼠移動到該區塊)
onmouseout 滑鼠移出

練習：設計簡單的按鈕

<!DOCTYPE html>
<html>
<head> 
    <title>事件處理練習：設計按鈕</title>
    <style>
        .btn{
            background-color:#ffcccc;
            padding:8px;border-radius:5px;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <span
        class="btn"
        onmouseover="over(this);" onmouseout="out(this);"
        onmousedown="down(this);" onmouseup="up(this);"
    >按鈕1</span>
    <span
        class="btn"
        onmouseover="over(this);" onmouseout="out(this);"
        onmousedown="down(this);" onmouseup="up(this);"
    >按鈕2</span>
    
    <script>
        function over(elem){
            elem.style.fontWeight="normal";
        }
        function out(elem){
            elem.style.fontWeight="bold"; //字體加粗
        }
        function down(elem){
            elem.style.backgroundColor="#ddaaaa"; //調整色號使顏色變深
        }
        function up(elem){
            elem.style.backgroundColor="#ffcccc";
        }
    </script>
</body>
</html>

說明